<template>
	<view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="text" active-color="#4cd964"></uni-segmented-control>
		<view class="content">
			<view v-if="current === 0">
				<uni-card  v-for="item in newEarthQuake" :title=item.参考位置 thumbnail="../../static/dangerous2.png" extra="详情" note="Tips" @click="detail(item)">
					<view class="">
						震级：{{item.震级}}
					</view>
					<view class="">
						经度:{{item.经度}} 纬度:{{item.纬度}}
					</view>
					<template v-slot:footer>
						<view class="footer-box" style="font-size: 25rpx;">
							<!-- <button>详情</button> -->
							发震时刻：{{item.发生地震的时刻}}
						</view>
					</template>
				</uni-card>
				
				
			</view>
			<!-- 灾情上报 -->
			<view v-if="current === 1">
				<view class="reportbody">
					<view class="box2">
						<view class="boxItem animated fadeInRight" style="background-color: rgba(254,22,22,0.2);" @click="houseClick()">
							房屋破坏
						</view>
						<view class="boxItem animated fadeInUp" style="background-color: rgba(106, 151, 254, 0.2);" @click="dieClick()">
							人员死亡
						</view>
					</view>
					<view class="box2">
						<view class="boxItem animated fadeInDown" style="background-color: rgba(169, 21, 254, 0.2);" @click="otherClick()">
							其他灾害
						</view>
						<view class="boxItem animated fadeInLeft" style="background-color: rgba(30, 254, 63, 0.2);" @click="myUnloading()">
							我的上传
						</view>
					</view>
					<view class="text">
						<text>在确保安全的情况下，上传您的避险反馈，您所在的地区地震和其他灾害事件的灾情，以便相关应急部门第一时间获取现场灾情，实现精准救援</text>
					</view>
				</view>
			</view>
			<view v-if="current === 2">
				<view style="text-align: center;margin-top: 130rpx;">
					暂未开放
				</view>
				
			</view>
		</view>
	</view>
</template>


<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import uniCard from '@/components/uni-card/uni-card.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				items: ['地震信息', '灾情上报', '朋友圈'],
				current: 0,
				newEarthQuake:[{"参考位置":"内蒙古呼和浩特市和林格尔县","发生地震的时刻":"2020-8-31 07:09:55","序号":"1","深度":"15","经度":"111.98","维度":"40.37","震级":"3.0"},{"参考位置":"大西洋海岭中部","发生地震的时刻":"2020-8-31 05:20:29","序号":"2","深度":"10","经度":"-29.70","维度":"0.88","震级":"6.2"},{"参考位置":"新疆克孜勒苏州阿克陶县","发生地震的时刻":"2020-8-30 19:08:29","序号":"3","深度":"110","经度":"73.92","维度":"38.56","震级":"3.2"},{"参考位置":"海南文昌市","发生地震的时刻":"2020-8-30 18:05:02","序号":"4","深度":"10","经度":"110.68","维度":"19.57","震级":"2.9"},{"参考位置":"新疆阿克苏地区库车市","发生地震的时刻":"2020-8-30 15:24:08","序号":"5","深度":"10","经度":"83.85","维度":"41.28","震级":"3.0"},{"参考位置":"西藏山南市错那县","发生地震的时刻":"2020-8-28 00:43:25","序号":"6","深度":"10","经度":"92.35","维度":"27.21","震级":"3.0"},{"参考位置":"缅甸","发生地震的时刻":"2020-8-27 23:55:05","序号":"7","深度":"8","经度":"99.23","维度":"21.99","震级":"3.1"},{"参考位置":"缅甸","发生地震的时刻":"2020-8-27 20:07:15","序号":"8","深度":"10","经度":"93.20","维度":"23.00","震级":"5.2"},{"参考位置":"青海海西州唐古拉地区","发生地震的时刻":"2020-8-26 21:46:15","序号":"9","深度":"9","经度":"92.32","维度":"34.22","震级":"3.3"},{"参考位置":"新疆和田地区于田县","发生地震的时刻":"2020-8-26 08:48:51","序号":"10","深度":"10","经度":"82.39","维度":"35.77","震级":"4.3"},{"参考位置":"印尼苏门答腊岛南部海域","发生地震的时刻":"2020-8-26 07:27:53","序号":"11","深度":"20","经度":"104.50","维度":"-6.88","震级":"5.3"},{"参考位置":"秘鲁","发生地震的时刻":"2020-8-25 13:18:11","序号":"12","深度":"30","经度":"-80.90","维度":"-4.04","震级":"5.4"},{"参考位置":"哥斯达黎加","发生地震的时刻":"2020-8-25 05:51:09","序号":"13","深度":"20","经度":"-84.67","维度":"9.63","震级":"5.9"},{"参考位置":"印尼爪哇岛以南海域","发生地震的时刻":"2020-8-24 01:38:01","序号":"14","深度":"10","经度":"108.18","维度":"-9.60","震级":"5.2"},{"参考位置":"西藏那曲市尼玛县","发生地震的时刻":"2020-8-24 01:07:42","序号":"15","深度":"7","经度":"87.63","维度":"30.44","震级":"4.0"},{"参考位置":"四川宜宾市珙县","发生地震的时刻":"2020-8-22 13:36:36","序号":"16","深度":"8","经度":"104.83","维度":"28.19","震级":"3.2"},{"参考位置":"新疆克孜勒苏州乌恰县","发生地震的时刻":"2020-8-22 09:22:28","序号":"17","深度":"18","经度":"74.63","维度":"39.59","震级":"3.7"},{"参考位置":"印尼苏门答腊岛南部海域","发生地震的时刻":"2020-8-22 08:39:33","序号":"18","深度":"10","经度":"100.84","维度":"-4.14","震级":"5.5"},{"参考位置":"四川宜宾市珙县","发生地震的时刻":"2020-8-21 17:27:03","序号":"19","深度":"8","经度":"104.82","维度":"28.15","震级":"3.0"},{"参考位置":"印尼班达海","发生地震的时刻":"2020-8-21 12:09:49","序号":"20","深度":"640","经度":"123.54","维度":"-6.74","震级":"6.8"}]
			}
		},
		onLoad() {
			 this.getNewQuakeInfo();
		},
		methods: {
			getNewQuakeInfo(){
				uni.request({
				    url: 'http://47.93.42.155:8080/WePrevent/GetNewQuakeServlet', //仅为示例，并非真实接口地址。
				    success: (res) => {
				        console.log(res.data);
						this.newEarthQuake=res.data;
				    }
				});
			},
			onPullDownRefresh() {
			        console.log('refresh');
			        setTimeout( ()=> {			
			            uni.stopPullDownRefresh();
						this.getNewQuakeInfo();
			        }, 1000);
					
			    },
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			detail(item) {
				console.log(item)
				
				uni.navigateTo({
					url: "../quakedetail/quakedetail?" + "j=" + item.经度 + "&w=" + item.纬度 + "&degree=" + item.震级 + "&depth=" + item.深度 + "&location=" + item.参考位置 + "&time=" + item.发生地震的时刻
				})
				// uni.showToast({
				// 	title:'ddd'
				// })
			},
			// 房屋破坏上报
			houseClick() {
				if(getApp().globalData.islogin=='0'){
					uni.showToast({
					    title: '您未登录，请登录后再次尝试！',
					    duration: 2000,
						icon:"none"
					});
				}else{
					uni.navigateTo({
						url: "../houseDanger/houseDanger"
					})
				}
				
			},
			// 其他灾害上报
			otherClick() {
				if(getApp().globalData.islogin=='0'){
					uni.showToast({
					    title: '您未登录，请登录后再次尝试！',
					    duration: 2000,
						icon:"none"
					});
				}else{
					uni.navigateTo({
						url: "../otherDanger/otherDanger"
					})
				}
				
			},
			// 人员死亡上报
			dieClick(){
				if(getApp().globalData.islogin=='0'){
					uni.showToast({
					    title: '您未登录，请登录后再次尝试！',
					    duration: 2000,
						icon:"none"
					});
				}else{
					uni.navigateTo({
						url: "../dieDanger/dieDanger"
					})
				}
				
			},
			//我的上传
			myUnloading(){
				if(getApp().globalData.islogin=='0'){
					uni.showToast({
					    title: '您未登录，请登录后再次尝试！',
					    duration: 2000,
						icon:"none"
					});
				}else{
					uni.navigateTo({
						url: "../myUpload/myUpload"
					})
				}
				
			}
			
			
			

		},
		components: {
			uniCard
		}
	}
</script>

<style lang="scss">
	/* 	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}


	.reportbody {
		margin-top: 30rpx;

		.box2 {
			display: flex;

			.boxItem {

				width: 50%;
				height: 300rpx;
				margin: 20rpx 20rpx;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.text {
			margin: 30rpx 10rpx;
			font-size: 30rpx;
			color: rgba(0, 0, 0, 0.6);
		}
	}
</style>
